<script setup>
import { ref } from 'vue'
const loading = ref(true) // 初始化时设为true
import Form from '@/components/common/formAdd.vue'
import { useUserStore } from '@/stores/user'
import {
  addPracticeApplyApi,
  approveApplicationApi,
  getPracticeApplyByCounselorApi,
  getPracticeApplyDetailApi,
  getPracticeApplyListApi
} from '@/api/baseData'
import { dayFormat } from '@/utils/common/dayjs'
import { showMessage, showStatusMessage } from '@/utils/common/showMessage'
import Table from '@/components/practice/table.vue'
const userStore = useUserStore()

// 定义表单数据
const formData = {
  account: '',
  name: '',
  college: '',
  major: '',
  class: '',
  type: '',
  desc: ''
}
const formOpt = [
  {
    label: '学号',
    prop: 'account',
    type: 'input'
  },
  {
    label: '姓名',
    prop: 'name',
    type: 'input'
  },
  {
    label: '学院',
    prop: 'college',
    type: 'input'
  },
  {
    label: '专业',
    prop: 'major',
    type: 'input'
  },
  {
    label: '班级',
    prop: 'class',
    type: 'input'
  },
  {
    label: '实习类型',
    prop: 'type',
    type: 'selectIntership'
  }
]
const btnOpt = [
  {
    type: 'warning',
    name: '重置',
    click: 'handleReset',
    prop: 'cancel'
  },
  {
    type: 'primary',
    name: '查找',
    click: 'handleSubmit',
    prop: 'submit'
  }
]

// 表单按钮点击监听事件
function handleForm(type, data) {
  switch (type) {
    case 'submit':
      handleFormSubmit(data)
      break
      case 'cancel':
        reset()
        break
    default:
      break
  }
}
// 表单提交事件
async function handleFormSubmit(data) {
  console.log(data)
  try {
    const res = await getPracticeApplyDetailApi(data)
    console.log(res)
    tableData.value = res.data
  } catch (error) {
    console.error(error)
  }
}
// 实习申请结果
const applyResult = ref(null)
const applyResultDesc = ref('')
const tableData = ref([])
const columns = ref([
  {
    label: '账号',
    prop: 'account'
  },
  {
    label: '姓名',
    prop: 'name'
  },
  {
    label: '学院',
    prop: 'college'
  },
  {
    label: '专业',
    prop: 'major'
  },
  {
    label: '班级',
    prop: 'class'
  },
  {
    label: '实习类型',
    prop: 'type'
  },
  {
    label: '申请时间',
    prop: 'create_time'
  },
  {
    label: '申请状态',
    prop: 'status',
    slot: 'span'
  }
])
const options = [
  {
    label: '查看申请流程',
    type: 'primary',
    prop: 'viewResultStep'
  }
]
// 获取实习申请记录
async function getPracticeApplyRecord(data) {
  loading.value = true
  try {
    const res = await getPracticeApplyByCounselorApi({
      ...data,
      identity: userStore.userInfo.identity,
      class: userStore.userInfo.class
    })
    if (userStore.userInfo.identity == '管理员' && userStore.userInfo.college !== '*') {
      tableData.value = res.data.filter(
        (item) => item.college === userStore.userInfo.college
      )
    } else {
      tableData.value = res.data
    }

    loading.value = false
  } catch (error) {
    stepActive.value = 0
    loading.value = false
  }
}
getPracticeApplyRecord()

function handleTable(data, type) {
  // 修改参数顺序,因为Table组件传递的参数顺序是(data, type)
  switch (type) {
    case 'viewResultStep':
      handleviewResultStep(data)
      break
    default:
      break
  }
}
function reset() {
  Object.keys(formData).forEach((key) => {
    formData[key] = '' // 清空数据
  })
  getPracticeApplyRecord()
}
const drawer = ref(false)
const drawerData = ref(null)
function handleviewResultStep(data) {
  drawerData.value = data
  drawer.value = true
  console.log(drawerData.value)
}
function handleClose() {
  drawer.value = false
  drawerData.value = null
}

const handlePass = async (id) => {
  try {
    // 调用通过申请的API
    const res = await approveApplicationApi({ id, status: 2, desc: applyResultDesc.value })
    showStatusMessage(res)
    getPracticeApplyRecord()
    drawer.value = false
  } catch (error) {
    console.error(error)
  }
}

const handleReject = async (id) => {
  if (!applyResultDesc.value) {
    showMessage('请输入驳回原因', 'warning')
    return
  }
  try {
    // 调用驳回申请的API
    const res = await approveApplicationApi({ id, status: 1, desc: applyResultDesc.value })
    showStatusMessage(res)
    getPracticeApplyRecord()
    drawer.value = false
  } catch (error) {
    console.error(error)
  }
}
</script>

<template>
  <div class="apply-wrapper" v-loading="loading">
    <div class="apply-top">
      <Form :data="formData" :isRules="false" :formOpt="formOpt" :btnOpt="btnOpt" @handleForm="handleForm"></Form>
    </div>
    <div class="apply-middle">
      <Table
        :tableData="tableData"
        :columns="columns"
        :tableOpt="tableOpt"
        :options="options"
        @handleTable="handleTable"
        border
        stripe
      ></Table>
    </div>
    <div class="apply-bottom"></div>
    <el-drawer
      v-model="drawer"
      direction="rtl"
      size="40%"
      :before-close="handleClose"
      wrapperClosable
    >
      <div class="drawer-content" v-if="drawerData">
        <h3 class="drawer-title">申请详情</h3>
        <div class="info-section">
          <div class="content-list">
            <span class="label">学号:</span>
            <span class="value">{{ drawerData.account }}</span>
          </div>
          <div class="content-list">
            <span class="label">姓名:</span>
            <span class="value">{{ drawerData.name }}</span>
          </div>
          <div class="content-list">
            <span class="label">学院:</span>
            <span class="value">{{ drawerData.college }}</span>
          </div>
          <div class="content-list">
            <span class="label">专业:</span>
            <span class="value">{{ drawerData.major }}</span>
          </div>
          <div class="content-list">
            <span class="label">班级:</span>
            <span class="value">{{ drawerData.class }}</span>
          </div>
          <div class="content-list">
            <span class="label">实习类型:</span>
            <span class="value">{{ drawerData.type }}</span>
          </div>
          <div class="content-list">
            <span class="label">申请时间:</span>
            <span class="value">{{ drawerData.create_time }}</span>
          </div>
        </div>
        <div class="action-section">
          <el-input
            v-model="applyResultDesc"
            placeholder="请输入驳回原因"
            type="textarea"
            :rows="4"
            class="reason-input"
          ></el-input>
          <div class="button-group">
            <el-button
              type="primary"
              plain
              :disabled="drawerData.status !== 0"
              @click="handlePass(drawerData.id)"
              >通过</el-button
            >
            <el-button
              type="danger"
              plain
              :disabled="drawerData.status !== 0"
              @click="handleReject(drawerData.id)"
              >驳回</el-button
            >
          </div>
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<style lang="scss" scoped>
.apply-wrapper {
  display: flex;
  flex-direction: column;
}
.apply-top {
  width: 100%;
  height: 100px;
  text-align: left;
}
.apply-middle {
  width: 100%;
  margin-top: 80px;
}
.apply-bottom {
  width: 100%;
  flex: 1;
}
.drawer-content {
  padding: 20px;

  .drawer-title {
    font-size: 18px;
    font-weight: 600;
    color: #303133;
    margin-bottom: 24px;
    padding-bottom: 12px;
    border-bottom: 1px solid #ebeef5;
  }

  .info-section {
    background-color: #f5f7fa;
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 24px;

    .content-list {
      display: flex;
      margin-bottom: 16px;
      line-height: 24px;

      &:last-child {
        margin-bottom: 0;
      }

      .label {
        width: 80px;
        color: #606266;
        font-weight: 500;
      }

      .value {
        flex: 1;
        color: #303133;
      }
    }
  }

  .action-section {
    .reason-input {
      margin-bottom: 20px;
    }

    .button-group {
      display: flex;
      justify-content: flex-end;
      gap: 12px;
    }
  }
}
</style>
